<template>
  <div class="rate flex js-ct">
    <div class="rate-box person-bg">
      <div class="rate-content">
        <div
          class="trad-tabbox flex js-st point text-bold quotet3 text-14 quoteline"
        >
          <div
            class="trad-tab "
            v-for="item in state.tabbox"
            :key="item.id"
            @click="changeName(item.id)"
            v-show="
              item.id === 1
                ? bibiStatus
                : item.id === 2
                ? leverStatus
                : item.id === 3
                ? secondStatus
                : item.id === 5
                ? legalStatus
                : stockStatus
            "
            :class="{
              'active-line text-bolder quotet2': state.active === item.id,
            }"
          >
            {{ item.name }}
          </div>
        </div>
        <div
          class="flex align-center mb-20 mt-30"
          v-if="state.current_fee && state.active === 1"
        >
          <div class="rate-header rateheader text-left  flex-grow-1">
            <div class="text-24 text-bold color_1e mb-4">
              <span>{{ $t("footer.MyRateLevel") }} </span>
              <span class="text-login"
                >VIP{{ state.current_fee?.member_level }}
              </span>
            </div>
            <div class="text-12 text-normal color_1e ">
              {{ $t("user.rateinfo") }}
            </div>
          </div>
          <div
            class="rate-header rateheader text-center ml-13 itembox flex align-center js-ar"
          >
            <div>
              <div class=" color_1e mb-4">Maker</div>
              <div class="text-24 text-bold text-login">
                {{
                  state.current_fee?.member_buy_rate
                    ? rideFix(state.current_fee?.member_buy_rate, 100)
                    : 0
                }}%
              </div>
            </div>
            <div>
              <div class=" color_1e mb-4">Taker</div>
              <div class="text-24 text-bold text-login">
                {{
                  state.current_fee?.member_sell_rate
                    ? rideFix(state.current_fee?.member_sell_rate, 100)
                    : 0
                }}%
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="state.active === 3 || state.active === 4"
          class="rate-header rateheader text-left mt-24"
        >
          <div class="ml-10 clor_00">
            <div class="text-24 mb-4 text-bolder">{{ $t("user.rate") }}</div>
            <div class="text-12" v-if="state.active === 3">
              {{ $t("footer.transactionFeeTip") }}
            </div>
            <div class="text-12" v-if="state.active === 4">
              {{ $t("footer.stockFeeTip") }}
            </div>
            <div class="text-12">
              {{ $t("footer.methodTip") }}
            </div>
          </div>
        </div>
        <div class="share-color flex js-st text-14 mb-24"></div>
        <div class="text-left downt3 text-12 mb-24" v-if="state.active === 1">
          <p>· {{ $t("user.ratet1") }}</p>
          <p>
            ·
            {{ $t("user.ratet2") }}
          </p>
          <p>· {{ $t("user.ratet3") }}</p>
        </div>
        <div class="rate-teble">
          <ul
            class="table-hr ratehr flex js-sp textperson-t2 text-18"
            v-if="state.active !== 1 || state.current_fee"
          >
            <li class="left">
              {{
                state.active === 1
                  ? $t("user.leve")
                  : state.active === 2
                  ? $t("exchange.tradingPair")
                  : state.active === 3 || state.active === 7
                  ? $t("lever.duration")
                  : state.active === 4 || state.active === 6
                  ? $t("stock.stockName")
                  : state.active === 5
                  ? $t("fiat.fiatPair")
                  : ""
              }}
            </li>
            <li class="left" v-if="state.active === 1">{{ $t("user.num") }}</li>
            <li class="left" v-if="state.active !== 5">
              {{ $t("user.rate") }}
            </li>
            <li class="left" v-if="state.active === 5">Maker</li>
            <li class="left" v-if="state.active === 5">Taker</li>
          </ul>
          <!-- 第二行 -->
          <ul
            class="table-hr rateheader flex js-sp textperson-t2 text-14"
            v-if="
              (state.active !== 1 || state.current_fee) && state.active !== 5
            "
          >
            <li class="left">
              <!-- <span v-if="state.active === 2">BTC/USDT</span> -->
            </li>
            <li class="left" v-if="state.active === 1">
              {{ $t("user.valent") }}
            </li>
            <li
              class="left flex js-ar"
              v-if="state.active === 2 || state.active === 6"
            >
              <span>Maker</span>
              <span>Taker</span>
            </li>
            <li
              class="left flex js-ar"
              v-if="
                state.active === 4 || state.active === 3 || state.active === 7
              "
            >
              <span>{{ $t("footer.percentage") }}(%)</span>
              <span>{{ $t("footer.fixedPrice") }}</span>
            </li>
          </ul>
          <div
            v-if="state.active === 1 && state.current_fee"
            v-loading="state.loading"
          >
            <ul
              class="table-hr flex js-sp textperson-t2 text-18 family-D text-bold"
              :class="{ rateheader: index % 2 !== 0 }"
              v-for="(item, index) in state.list.fee_list"
              :key="item.id"
            >
              <li class="left">
                {{ item.member_name }}{{ item.member_level }}
              </li>

              <li class="left">>={{ item.member_trading_volume }}</li>
              <li class="left flex js-ar">
                <span class="flex-grow-1 w-50"
                  >{{
                    item.member_buy_rate
                      ? rideFix(item.member_buy_rate, 100)
                      : 0
                  }}%</span
                >
                <span class="flex-grow-1 w-50"
                  >{{
                    item.member_sell_rate
                      ? rideFix(item.member_sell_rate, 100)
                      : 0
                  }}%</span
                >
              </li>
            </ul>
          </div>
          <div v-if="state.active === 2" v-loading="state.loading">
            <ul
              class="table-hr flex js-sp textperson-t2 text-18 family-D text-bold"
              :class="{ rateheader: index % 2 !== 0 }"
              v-for="(item, index) in state.list"
              :key="item.id"
            >
              <li class="left">
                {{ item.currency_name }}/{{ item.legal_name }}
              </li>
              <li class="left flex js-ar">
                <span class="flex-grow-1 w-50"
                  >{{
                    item.lever_pending_fee_rate
                      ? rideFix(item.lever_pending_fee_rate, 100)
                      : 0
                  }}%</span
                >
                <span class="flex-grow-1 w-50"
                  >{{
                    item.lever_transaction_fee_rate
                      ? rideFix(item.lever_transaction_fee_rate, 100)
                      : 0
                  }}%</span
                >
              </li>
            </ul>
          </div>
          <div v-if="state.active === 3" v-loading="state.loading">
            <ul
              class="table-hr flex js-sp textperson-t2 text-18 family-D text-bold"
              :class="{ rateheader: index % 2 !== 0 }"
              v-for="(item, index) in state.list"
              :key="item.id"
            >
              <li class="left flex align-center js-ct">
                <div>{{ item.second_lever_real_time }}s</div>
              </li>
              <li class="left flex js-ar">
                <span class="flex-grow-1 w-50">{{
                  item.handling_fee_type === 1
                    ? decimalDigitsInputFilter(item.handling_fee, 6) + "%"
                    : "--"
                }}</span>
                <span class="flex-grow-1 w-50">{{
                  item.handling_fee_type === 2
                    ? decimalDigitsInputFilter(item.handling_fee, 2)
                    : "--"
                }}</span>
              </li>
            </ul>
          </div>
          <div v-if="state.active === 4" v-loading="state.loading">
            <ul
              class="table-hr flex js-sp textperson-t2 text-18 family-D text-bold"
              :class="{ rateheader: index % 2 !== 0 }"
              v-for="(item, index) in state.list"
              :key="item.id"
            >
              <li class="left flex align-center js-ct">
                <div>{{ item.stock_name }}</div>
                <div>
                  <div
                    class="share-color text-10 tag us ml-8"
                    v-if="item.stock_type === 1"
                  >
                    US
                  </div>
                  <div
                    class="share-color text-10 tag hk ml-8"
                    v-if="item.stock_type === 2"
                  >
                    HK
                  </div>
                </div>
              </li>
              <li class="left flex js-ar">
                <div class="flex-grow-1 w-50">
                  {{
                    item.handling_fee_type === 1
                      ? decimalDigitsInputFilter(
                          rideFix(parseFloat(item.handling_fee), 100),
                          6
                        ) + "%"
                      : "--"
                  }}
                </div>
                <div class="flex-grow-1 w-50">
                  {{
                    item.handling_fee_type === 2
                      ? decimalDigitsInputFilter(item.handling_fee, 2)
                      : "--"
                  }}
                </div>
              </li>
            </ul>
          </div>
          <div v-if="state.active === 5" v-loading="state.loading">
            <ul
              class="table-hr flex js-sp textperson-t2 text-18 family-D text-bold"
              :class="{ rateheader: index % 2 !== 0 }"
              v-for="(item, index) in state.list"
              :key="item.id"
            >
              <li class="left">
                {{ item.currency_name }}/{{ item.fiat_currency_alias }}
              </li>

              <li class="left">{{ rideFix(item.maker_fee, 100) }}%</li>
              <li class="left flex js-ct">
                {{ rideFix(item.taker_fee, 100) }}%
              </li>
            </ul>
          </div>
          <div v-if="state.active === 6" v-loading="state.loading">
            <ul
              class="table-hr flex js-sp textperson-t2 text-18 family-D text-bold"
              :class="{ rateheader: index % 2 !== 0 }"
              v-for="(item, index) in state.list"
              :key="item.id"
            >
              <li class="left flex align-center js-ct">
                <div>{{ item.stock_name }}/{{ item.stock_code }}</div>
                <div>
                  <div
                    class="share-color text-10 tag us ml-8"
                    v-if="item.stock_type === 1"
                  >
                    US
                  </div>
                  <div
                    class="share-color text-10 tag hk ml-8"
                    v-if="item.stock_type === 2"
                  >
                    HK
                  </div>
                </div>
              </li>
              <li class="left flex js-ar">
                <div class="flex-grow-1 w-50">
                  {{ rideFix(item.maker_fee, 100) }}%
                </div>
                <div class="flex-grow-1 w-50">
                  {{ rideFix(item.taker_fee, 100) }}%
                </div>
              </li>
            </ul>
          </div>
          <div v-if="state.active === 7" v-loading="state.loading">
            <ul
              class="table-hr flex js-sp textperson-t2 text-18 family-D text-bold"
              :class="{ rateheader: index % 2 !== 0 }"
              v-for="(item, index) in state.list"
              :key="item.id"
            >
              <li class="left flex align-center js-ct">
                <div>{{ item.second_lever_show_time }}s</div>
              </li>
              <li class="left flex js-ar">
                <span class="flex-grow-1 w-50">{{
                  item.handling_fee_type === 1
                    ? decimalDigitsInputFilter(item.handling_fee, 6) + "%"
                    : "--"
                }}</span>
                <span class="flex-grow-1 w-50">{{
                  item.handling_fee_type === 2
                    ? decimalDigitsInputFilter(item.handling_fee, 2)
                    : "--"
                }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, computed } from "vue";
import {
  transactionFeeList,
  leverFeeList,
  getSecondHandlingFeeList,
} from "@/api/currency";
import { getCurrencySellList } from "@/api/fiat";
import { stockPageSimple } from "@/api/stock";
import {
  stockOrderLeverFeeList,
  StockOrderSecondLeverFeeList,
} from "@/api/stock-trading";
import {
  demoleverFeeList,
  demogetSecondHandlingFeeList,
  demostockOrderLeverFeeList,
  demoStockOrderSecondLeverFeeList,
} from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { decimalDigitsInputFilter } from "@/utils/common";
import { rideFix } from "@/utils/precisionMath";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    const { t } = useI18n();
    const $store = useStore();
    const $router = useRouter();
    const state = reactive({
      stock_status: false,
      active: 1,
      tabbox: [
        { name: t("header.bibi"), id: 1 },
        { name: t("header.lever"), id: 2 },
        { name: t("header.second"), id: 3 },
        { name: t("header.legal"), id: 5 },
        // { name: t("stock.stockInvestment"), id: 4 }
      ],
      list: [],
      loading: false,
      current_fee: [],
    });
    const systemInfo = computed(() => {
      return $store.state.user.systemInfo;
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    /**
     * methods
     */
    onMounted(() => {
      if ($store.state.user.token) {
        if (bibiStatus.value) {
          state.active = 1;
          gettransList();
        } else if (leverStatus.value) {
          state.active = 2;
          getleverList();
        } else if (secondStatus.value) {
          state.active = 3;
          getSecondList();
        } else if (legalStatus.value) {
          state.active = 5;
          getLegalList();
        }
      } else {
        $router.push("/login");
      }
      getStatus();
    });
    const bibiStatus = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "currency_transaction_status") {
          flag = ele.value;
        }
      });
      return flag;
    });
    const leverStatus = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "lever_status") {
          flag = ele.value;
        }
      });
      return flag;
    });
    const secondStatus = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "second_lever_status") {
          flag = ele.value;
        }
      });
      return flag;
    });
    const legalStatus = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "fiat_currency_transaction_status") {
          flag = ele.value;
        }
      });
      return flag;
    });
    const stockStatus = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "stock_status") {
          flag = ele.value;
        }
      });
      return flag;
    });
    const changeName = (id) => {
      if (state.active != id) {
        state.active = id;
        if (id === 1) {
          gettransList();
        } else if (id === 2) {
          getleverList();
        } else if (id === 3) {
          getSecondList();
        } else if (id === 4) {
          getStockList();
        } else if (id === 5) {
          getLegalList();
        } else if (id === 6) {
          getStockLeverList();
        } else if (id === 7) {
          getStockSecondList();
        }
      }
    };
    // 获取币币交易
    const gettransList = () => {
      state.loading = true;
      transactionFeeList().then((res) => {
        state.list = res.data;
        state.current_fee = res.data.current_fee;
        state.loading = false;
      });
    };
    // 获取合约交易
    const getleverList = () => {
      state.loading = true;
      let setFun = virtual_wallet.value ? demoleverFeeList : leverFeeList;
      setFun().then((res) => {
        state.list = res.data;
        state.loading = false;
      });
    };
    // 获取法币交易
    const getLegalList = () => {
      state.loading = true;
      getCurrencySellList().then((res) => {
        state.list = res.data;
        state.loading = false;
      });
    };
    //获取股票现货
    const getStockList = () => {
      state.loading = true;
      stockPageSimple().then((res) => {
        state.list = res.data;
        state.loading = false;
      });
    };
    //获取股票合约
    const getStockLeverList = () => {
      state.loading = true;
      let setFun = virtual_wallet.value
        ? demostockOrderLeverFeeList
        : stockOrderLeverFeeList;
      setFun().then((res) => {
        state.list = res.data;
        state.loading = false;
      });
    };
    //获取股票期权
    const getStockSecondList = () => {
      state.loading = true;
      let setFun = virtual_wallet.value
        ? demoStockOrderSecondLeverFeeList
        : StockOrderSecondLeverFeeList;
      setFun().then((res) => {
        state.list = res.data;
        state.loading = false;
      });
    };
    // 获取期权交易
    const getSecondList = () => {
      state.loading = true;
      let setFun = virtual_wallet.value
        ? demogetSecondHandlingFeeList
        : getSecondHandlingFeeList;
      setFun().then((res) => {
        state.list = res.data;
        state.loading = false;
      });
    };
    const getStatus = () => {
      systemInfo.value?.forEach((ele) => {
        // if(ele.key === "currency_transaction_status"){
        //   state.currency_transaction_status = ele.value
        // }
        if (ele.key === "stock_lever_status") {
          state.stock_lever_status = ele.value;
        }
        if (ele.key === "stock_second_lever_status") {
          state.stock_second_lever_status = ele.value;
        }
        if (ele.key === "stock_status") {
          state.stock_status = ele.value;
        }
      });
      if (state.stock_status) {
        state.tabbox.push({ name: t("stock.stockInvestment"), id: 4 });
      }
      if (state.stock_lever_status) {
        state.tabbox.push({ name: t("stock.stockLever"), id: 6 });
      }
      if (state.stock_second_lever_status) {
        state.tabbox.push({ name: t("stock.stockSecond"), id: 7 });
      }
    };
    return {
      state,
      gettransList,
      changeName,
      getleverList,
      rideFix,
      getStockList,
      decimalDigitsInputFilter,
      getSecondList,
      bibiStatus,
      leverStatus,
      secondStatus,
      stockStatus,
      legalStatus,
      getLegalList,
      getStockLeverList,
      getStockSecondList,
    };
  },
};
</script>

<style scoped lang="less">
.rate {
  width: 100%;
  min-height: 100vh;
  padding: 30px 0 60px 0;
}
.rate-box {
  width: 1120px;
  min-height: 690px;
  padding: 10px;
}
.rate-header {
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 12px;
}
.itembox {
  width: 415px;
}
.mb-4 {
  margin-bottom: 4px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-24 {
  margin-bottom: 24px;
}
.rate-content {
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
}
.btn {
  width: 120px;
  height: 42px;
  line-height: 42px;
  margin-inline-end: 30px;
}
.rate-teble {
  border-radius: 20px;
  overflow: hidden;
}
.trad-tabbox {
  width: 100%;
  padding: 10px 10px 0;
  border-bottom: 1px solid;
}
.trad-tab {
  min-height: 40px;
  // line-height: 40px;
  padding-bottom: 10px;
  position: relative;
  margin-inline-end: 30px;
}
.mt-30 {
  margin-top: 30px;
}
.ml-13 {
  margin-inline-start: 13px;
}
.ml-10 {
  margin-inline-start: 10px;
}
.mt-24 {
  margin-top: 24px;
}
.clor_00 {
  color: #000;
}
.table-hr {
  width: 100%;
  height: 44px;
  line-height: 44px;
}
.left {
  width: 33%;
}
.family-D {
  font-family: DINPro;
}
.tag {
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1.5;
}
.us {
  width: 26px;
  background: #e54b4b;
}
.hk {
  width: 26px;
  background: #1987ed;
}
.ml-8 {
  margin-inline-start: 8px;
}
.w-50 {
  width: 50%;
}
</style>
